<template>
  <div class="pages clearfix">
    <div class="pagesbox">
      <ul>
        <li class="prev">
          <button
            :class="{ disabled: pageNo == '1' }"
            :disabled="pageNo == '1'"
            @click="$emit('getPageNo', pageNo - 1)"
          >
            «上一页
          </button>
        </li>
        <li v-if="startNumAndEndNum.start > 1">
          <button
            :class="{ active: pageNo == '1' }"
            @click="$emit('getPageNo', 1)"
            :disabled="pageNo == '1'"
          >
            1
          </button>
        </li>
        <li class="dotted" v-if="startNumAndEndNum.start > 2">
          <span>...</span>
        </li>
        <!--中间部分-->
        <li
          v-for="(page, index) in startNumAndEndNum.end"
          :key="index"
          @click="$emit('getPageNo', page)"
          v-if="page >= startNumAndEndNum.start"
        >
          <button
            :class="{ active: pageNo == page }"
            :disabled="pageNo == page"
          >
            {{ page }}
          </button>
        </li>
        <li class="dotted" v-if="startNumAndEndNum.end < totalPage - 1">
          <span>...</span>
        </li>
        <li v-if="startNumAndEndNum.end < totalPage">
          <button
            @click="$emit('getPageNo', totalPage)"
            :class="{ active: pageNo == totalPage }"
            :disabled="pageNo == totalPage"
          >
            {{ totalPage }}
          </button>
        </li>
        <li class="next">
          <button
            :disabled="pageNo == totalPage"
            @click="$emit('getPageNo', pageNo + 1)"
            :class="{ disabled: pageNo == totalPage }"
          >
            下一页»
          </button>
        </li>
      </ul>
      <div class="total">
        <span>共{{ total }}条&nbsp;</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props: ["pageNo", "pageSize", "total", "continues"],
  computed: {
    totalPage() {
      return Math.ceil(this.total / this.pageSize);
    },
    //计算出连续页码的起始数字和结束数字
    startNumAndEndNum() {
      let start = 0;
      let end = 0;
      if (this.continues > this.totalPage) {
        start = 1;
        end = this.totalPage;
      } else {
        start = this.pageNo - parseInt(this.continues / 2);
        end = this.pageNo + parseInt(this.continues / 2);
        if (start < 1) {
          start = 1;
          end = this.continues;
        }
        if (end > this.totalPage) {
          end = this.totalPage;
          start = this.totalPage - this.continues + 1;
        }
      }
      return { start, end };
    },
  },
};
</script>

<style lang="css" scoped>
/*页码*/
.pages {
  margin-top: 18px;
  text-align: center;
}
.pages .pagesbox {
  display: inline-block;
}
.pages ul {
  float: left;
}
.pages li {
  float: left;
}
.pages li button {
  display: inline-block;
  line-height: 38px;
  padding: 0 20px;
  margin: 5px 2px;
  height: 38px;
  background-color: #fff;
  border: 1px solid #e0e9ee;
  color: #666;
  font-size: 14px;
}
.pages .prev button,
.pages .next button {
  background-color: #fafafa;
}
.pages .total,
.pages .dotted {
  float: left;
  margin: 5px 2px;
  font-size: 14px;
  line-height: 38px;
  padding: 0 20px;
}
.pages li button[class="active"] {
  background-color: #e1251b;
  color: #ffff;
  border: none;
  cursor: default;
}
.pages li button[class="disabled"] {
  color: #999;
  cursor: default;
}
</style>
